<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="container align-center flex-col">
      <image class="img-top" src="https://down.qwdata.vip/app_icon/vip_red_packet_dialog_top.png"></image>
      <view class="flex-col red-container align-center">
        <image class="img-bg" src="https://down.qwdata.vip/app_icon/vip_red_packet_dialog_bj.png"></image>
        <image class="img-btn" src="https://down.qwdata.vip/app_icon/vip_red_packet_dialog_button.png" @click="toUse"></image>
      </view>
      <image class="close" src="https://down.qwdata.vip/app_icon/vip_red_packet_dialog_close.png" @click="close"></image>
    </view>
  </uni-popup>
</template>
<script>

export default {
  name: "VipRedPacketDialog",
  data() {
    return {}
  },

  methods: {
    open() {
      this.$refs.popup.open()
    },
    toUse() {
      this.$refs.popup.close()
    },
    close() {
      this.$refs.popup.close()
      this.$emit('close')
    },
  }
}
</script>

<style scoped lang='scss'>
.container {

  .img-top {
    width: 442upx;
    height: 154upx;
    margin-bottom: 20upx;
  }

  .red-container {
    position: relative;
    width: 706upx;
    height: 640upx;

    .img-bg {
      width: 706upx;
      height: 640upx;
    }

    .img-btn {
      position: absolute;
      top: 500upx;
      width: 426upx;
      height: 98upx;
    }
  }

  .close {
    position: absolute;
    top: 174upx;
    right: 60upx;
    width: 36upx;
    height: 36upx;
  }

}
</style>
